<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>Bootstrap 101 Template</title>

	<!-- Bootstrap -->
	<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
	<link href="../bootstrap/css/bootstrap-theme.css" rel="stylesheet">

	<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
	<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
	<!--[if lt IE 9]>
	<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
	<![endif]-->

	<title>登录</title>
</head>
<style>
	form{
		padding-top: 150px;
	}
	input{
		font-family: "微软雅黑";
	}
</style>
<body>
	<form class="form-horizontal" >
		<div class="form-group">
			<label for="loginName" class="col-sm-4 control-label">账号</label>
			<div class="col-sm-5">
				<input type="text" class="form-control" id="loginName" name="loginName" placeholder="账号">
			</div>
		</div>
		<div class="form-group">
			<label for="password" class="col-sm-4 control-label">密码</label>
			<div class="col-sm-5">
				<input type="password" class="form-control" id="password" name="password" placeholder="密码">
			</div>
		</div>
		<div class="form-group">
			<label for="kaptcha" class="col-sm-4 control-label">验证码</label>
			<div class="col-sm-4">
				<input type="text" class="form-control" id="kaptcha" name="kaptcha" placeholder="验证码">
			</div>
			<div for="kaptcha" class="col-sm-4">
				<img width="20%" id="kaptchaImg" src="http://localhost:8085/maven_project_shiro/login/kaptcha">
			</div>
		</div>
		<div class="form-group">
			<label for="roleRadio" class="col-sm-4 control-label">角色</label>
			<div class="col-sm-4" id="roleRadio">
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-offset-4 col-sm-10">
				<div class="checkbox">
					<label>
						<input type="checkbox" name="rememberMe" id="rememberMe"> 记住我
					</label>
				</div>
			</div>
		</div>
		<div class="form-group">
			<div class="col-sm-offset-4 col-sm-10">
				<button type="button" id="buttonSubmit" class="btn btn-default">登录</button>
			</div>
		</div>
	</form>
</body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../bootstrap/jquery/jquery-3.5.0.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">

	//登录
	function clinkSubmitButton(){

		//提交按钮点击事件
		$("#buttonSubmit").click(function(){
			var loginName = $("#loginName").val().trim();
			var password = $("#password").val().trim();
			var kaptcha = $("#kaptcha").val().trim();
			var roleName = $('#roleRadio input:radio:checked').val();
			var rememberMe = false;
			if($("#rememberMe input:checkbox:checked")){
				rememberMe = true;
			}
			$.post("/maven_project_shiro/login/login",
					{loginName:loginName,password:password,kaptcha:kaptcha,roleName:roleName,rememberMe:rememberMe}, function (resultMap) {
				if(resultMap.code == 0){
					//登录成功，重定向到首页
					setTimeout("javascript:location.href='./home.html'", 0);
				}else{
					alert(resultMap.message)
				}
			})
		});
	}

	//获取角色信息
	function getRoles() {
		$.ajax({
			type:"post",
			url:"/maven_project_shiro/role/getRoles",
			dataType:"json",
			contentType:"application/json;charset=UTF-8",
			success:function(resultMap){
				if(resultMap.code == 0){
					$.each(resultMap.data,function (index,role) {
						var option = '<label class="radio-inline"><input type="radio" name="roleName" id="'+role.id+'" value="'+role.roleName+'">'+role.displayRoleName+'</label>'
						$("#roleRadio").append(option);
					})
				}else{
					alert(resultMap.message);
				}
			},
			error:function(){
				$("#massage").html("登录失败，请重新登录或联系管理员！");
			}

		});
	}

	//点击刷新验证码
	function clickKaptchaImg(){
		$("#kaptchaImg").click(function() {
			var kaptchaImg = $("#kaptchaImg");
			var date = new Date();
			kaptchaImg.attr("src","http://localhost:8085/maven_project_shiro/login/kaptcha?date=" + date.getTime());
		})
	}

	$(function(){
		getRoles();
		clickKaptchaImg();
		clinkSubmitButton();
	});
</script>
</html>


